import { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { ItemWrapper } from './style'
// import { getImageSize } from '@/utils/handle-img-url'
import { useSearchParams } from 'react-router-dom'
import { message } from 'antd'
interface IProps {
  children?: ReactNode
  itemData: any
  size?: string
  bgp?: string
  width?: string
}
import {fetchPlayerDetailAction, fetchLyricAction} from '@/views/player/store/player'
import { useAppDispatch } from '@/store'


const AlbumItem: FC<IProps> = (props) => {
  const { itemData, size = '90px', bgp = '-578px', width = '118px' } = props
  const [, setSearchParams] = useSearchParams()
  function selectCategory(id: number) {
    setSearchParams({ id: id.toString() })
    messageApi.open({
      type: 'success',
      content: `当前选择的专辑列表id: ${id}`
    })
  }

  const [messageApi, contextHolder] = message.useMessage()


    const dispatch = useAppDispatch()
  const playSong = (id: number) => {
    dispatch(fetchPlayerDetailAction({ ids: id }))
    dispatch(fetchLyricAction({ id }))
  }
  return (
    <ItemWrapper size={size} width={width} bgp={bgp}>
      {contextHolder}
      <div
        className="album-item"
        onClick={() => {
          selectCategory(itemData.id),
          playSong(itemData.artists[0].id)
        }}
      >
        <div className="album-image">
          <img className="img" src={itemData.picUrl} alt="" />
          <a className="cover sprite_cover">{itemData.name}</a>
        </div>
        <div className="album-info">
          <div className="name">{itemData.name}</div>
          <div className="artist">{itemData.artist.name}</div>
        </div>
      </div>
    </ItemWrapper>
  )
}

export default memo(AlbumItem)
